import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

export default function BrowserRouters() {
  return (
    /* Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件
       BrowserRouter是history模式，HashRouter模式
       使用两者作为最顶层组件包裹其他组件 
    */
    <Router>
      <main>
        <nav>
          <ul>
            <li>
              < a href="/">Home</ a>
            </li>
            <li>
              < a href="/about">About</ a>
            </li>
            <li>
              < a href="/contact">Contact</ a>
            </li>
          </ul>
        </nav>
        {/* <Route path="/" render={() => <h1>Welcome!</h1>} /> */}
        {/* Route
            Route用于路径的匹配，然后进行组件的渲染，对应的属性如下：
              path 属性：用于设置匹配到的路径
              component 属性：设置匹配到路径后，渲染的组件
              render 属性：设置匹配到路径后，渲染的内容
              exact 属性：开启精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件 
        */}
         
      </main>
    </Router>
  );
}